import React, { useState, useEffect } from 'react';
import { Card, Table, Button, Space, Modal, Form, Input, Select, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { getMajorList, addMajor, updateMajor, deleteMajor } from '@/services/major';

const { Option } = Select;

const Major: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState('');
  const [currentRecord, setCurrentRecord] = useState<any>(null);

  const columns = [
    {
      title: '专业名称',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '专业代码',
      dataIndex: 'majorCode',
      key: 'majorCode',
    },
    {
      title: '专业类别',
      dataIndex: 'majorCategory',
      key: 'majorCategory',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <span style={{ color: status === '0' ? '#52c41a' : '#ff4d4f' }}>
          {status === '0' ? '正常' : '停用'}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await getMajorList();
      setData(response.data);
    } catch (error) {
      message.error('获取数据失败');
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleAdd = () => {
    setModalTitle('新增专业');
    setCurrentRecord(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setModalTitle('编辑专业');
    setCurrentRecord(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (record: any) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除专业"${record.majorName}"吗？`,
      onOk: async () => {
        try {
          await deleteMajor(record.majorId);
          message.success('删除成功');
          fetchData();
        } catch (error) {
          message.error('删除失败');
        }
      },
    });
  };

  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();
      if (currentRecord) {
        await updateMajor({ ...values, majorId: currentRecord.majorId });
        message.success('更新成功');
      } else {
        await addMajor(values);
        message.success('添加成功');
      }
      setModalVisible(false);
      fetchData();
    } catch (error) {
      message.error('操作失败');
    }
  };

  return (
    <PageContainer>
      <Card>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增专业
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={data}
          rowKey="majorId"
          loading={loading}
        />
      </Card>

      <Modal
        title={modalTitle}
        visible={modalVisible}
        onOk={handleModalOk}
        onCancel={() => setModalVisible(false)}
        destroyOnHidden
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="majorName"
            label="专业名称"
            rules={[{ required: true, message: '请输入专业名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="majorCode"
            label="专业代码"
            rules={[{ required: true, message: '请输入专业代码' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="majorCategory"
            label="专业类别"
            rules={[{ required: true, message: '请选择专业类别' }]}
          >
            <Select>
              <Option value="哲学">哲学</Option>
              <Option value="经济学">经济学</Option>
              <Option value="法学">法学</Option>
              <Option value="教育学">教育学</Option>
              <Option value="文学">文学</Option>
              <Option value="历史学">历史学</Option>
              <Option value="理学">理学</Option>
              <Option value="工学">工学</Option>
              <Option value="农学">农学</Option>
              <Option value="医学">医学</Option>
              <Option value="管理学">管理学</Option>
              <Option value="艺术学">艺术学</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="status"
            label="状态"
            initialValue="0"
          >
            <Select>
              <Option value="0">正常</Option>
              <Option value="1">停用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default Major; 